<template>
  <div class="gContainer">
    <GraphSearch @getData="update" />
    <d3graph
      :data="data"
      :names="names"
      :labels="labels"
      :linkTypes="linkTypes"
    />
  </div>
</template>

<script>
import GraphSearch from '@/components/GraphSearch.vue'
import d3graph from '@/components/d3graph.vue'
export default {
  components: {
    GraphSearch,
    d3graph
  },
  data () {
    return {
      data: { // d3jsonParser()处理 json 后返回的结果
        nodes: [],
        links: []
      },
      // names: ['院系名称', '专业名称', '课程名称', '班级序号', '第几次课'],
      // labels: ['院系名称', '专业名称', '课程名称', '班级序号', '第几次课'],
      // linkTypes: ['开设专业', '开设课程', '开设班级', '第几次课']
      names: ['领域', '任务', '文章', '作者', '发表处', '方法', '材料'],
      labels: ['领域', '任务', '文章', '作者', '发表处', '方法', '材料'],
      linkTypes: ['含有任务', '相关文章', '作者', '发表于', '含有方法', '含有材料']
    }
  },
  methods: {
    // 视图更新
    update (json) {
      console.log('update')
      this.d3jsonParser(json)
    },
    /*eslint-disable*/
    // 解析json数据，将节点和关系存储到nodes和links列表中，节点索引存储到nodeSet列表中，防止重复添加节点
    d3jsonParser (json) {
      const nodes = []  // 存放节点
      const links = [] // 存放关系
      const nodeSet = [] // 存放去重后nodes的id

      for (let item of json) {
        for (let segment of item.p.segments) {  // 每条json数据中的segments字段
          // 重新更改data格式
          if (nodeSet.indexOf(segment.start.identity) == -1) {  // start节点的索引不在nodeSet中
            nodeSet.push(segment.start.identity)
            nodes.push({
              id: segment.start.identity,           // 节点id
              label: segment.start.labels[0],       // 节点名称
              properties: segment.start.properties  // 节点属性
            })
          }
          if (nodeSet.indexOf(segment.end.identity) == -1) {
            nodeSet.push(segment.end.identity)
            nodes.push({
              id: segment.end.identity,
              label: segment.end.labels[0],
              properties: segment.end.properties
            })
          }
          links.push({
            source: segment.relationship.start,          // 关系起始节点
            target: segment.relationship.end,            // 关系终止节点
            type: segment.relationship.type,             // 关系类型
            properties: segment.relationship.properties  // 关系属性
          })
        }
      }
      // console.log(nodes)
      // console.log(links)
      this.data = { nodes, links }  // 把处理后的数据传递给data
    }
  }
}
</script>

<style lang="scss" scoped>
.gContainer {
  position: relative;
  border: 2px #000 solid;
  // background-color: #9dadc1;
  // background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
</style>
